<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <DeptTree class="w-1/5 xl:w-1/6" @select="handleSelect" ref="childsDom" />
    <BasicTable @register="registerTable" class="w-4/5 xl:w-5/6" :searchInfo="searchInfo">
      <template #toolbar>
        <!-- <a-button type="primary" @click="handleCreateGroup">新增字典组</a-button> -->
        <a-button type="primary" @click="handleCreate">新增字典项</a-button>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
:actions="[
            // {
            //   icon: 'clarity:info-standard-line',
            //   tooltip: record.status ? '启用字典' : '停止字典',
            //   popConfirm: {
            //     title: record.status ? '启用字典' : '停止字典',
            //     placement: 'left',
            //     confirm: handleStartOrStop.bind(null, record),
            //   },
            // },
            {
              icon: 'clarity:note-edit-line',
              tooltip: '编辑字典信息',
              onClick: handleEdit.bind(null, record),
            },
            // {
            //   icon: 'clarity:info-standard-line',
            //   tooltip: '重置用户密码',
            //   popConfirm: {
            //     title: '是否重置用户密码',
            //     placement: 'left',
            //     confirm: handleResetPassword.bind(null, record),
            //   },
            // },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              tooltip: '删除字典项',
              popConfirm: {
                title: '是否确认删除',
                placement: 'left',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]" />
        </template>
      </template>
    </BasicTable>
    <DictModal @register="registerModal" @success="handleSuccess" />
  </PageWrapper>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

import { BasicTable, useTable, TableAction } from '@/components/Table'
import { PageWrapper } from '@/components/Page'
import DeptTree from './DictTree.vue'

import { useModal } from '@/components/Modal'
import DictModal from './DictModal.vue'

import { columns, searchFormSchema } from './dict.data'
import { useGo } from '@/hooks/web/usePage'
import { postDictItemPageList, deleteDictItem, addorUpdateDictItem, startOrStopItem } from '@/api/sys/dict'

defineOptions({ name: 'DictManagement' })
const childsDom: any = ref(null);
const go = useGo()
const [registerModal, { openModal }] = useModal()
const searchInfo = reactive<Recordable>({})
const [registerTable, { reload, updateTableDataRecord, setPagination }] = useTable({
  title: '字典列表',
  api: postDictItemPageList,
  rowKey: 'itemId',
  size: 'small',
  columns,
  formConfig: {
    labelWidth: 120,
    schemas: searchFormSchema,
    autoSubmitOnEnter: true,
  },
  useSearchForm: true,
  showTableSetting: false,
  bordered: true,
  // handleSearchInfoFn(info) {
  //   console.log('handleSearchInfoFn', info)
  //   return info
  // },
  actionColumn: {
    width: 150,
    title: '操作',
    dataIndex: 'action',
  },
})

function handleCreate() {
  openModal(true, {
    isUpdate: false,
    dictCode: searchInfo.dictCode,
  })
}

function handleCreateGroup() { childsDom.value.handlePlus() }

function handleEdit(record: Recordable) {
  openModal(true, {
    record,
    isUpdate: true,
    dictCode: searchInfo.dictCode,
  })
}

async function handleDelete(record: Recordable) {
  await deleteDictItem(record.itemId)
  reload();
}

function handleSuccess({ isUpdate, values }) {
  if (isUpdate) {
    // 演示不刷新表格直接更新内部数据。
    // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
    const result = updateTableDataRecord(values.id, values)
    console.log(result)
  } else {
    reload()
  }
}

function handleSelect(dictCode = '') {
  searchInfo.dictCode = dictCode
  setPagination({ current: 1 })
  reload()
}

async function handleStartOrStop(record: Recordable) {
  await startOrStopItem({ ...record, status: record.status === 0 ? 1 : 0 })
  reload()
}
</script>
